<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>softphone</title>
  <script src="./js/ctibar-1.1.4.min.js"></script>

  <link rel="stylesheet" href="./css/usails.css">
  <link rel="stylesheet" href="./layui/css/layui.css">

  <script src="./layui/layui.js"></script>
  <script src="./js/jquery-1.10.2.min.js"></script>

</head>
<script>
        var calltimer;
        var calltype;
        var statusListener = {
            login: function () {
                $('.soft-function,.status').removeClass("disabled");
                $('#softphone-ready').removeClass("disabled");
                $('#softphone-notready').addClass("disabled");
                $('#usails_vacation .vacation').removeClass("disabled").show();
                $('#usails_vacation .vacationOff').addClass("disabled").hide();
                $('#softphone-makecall').removeClass("disabled");
                $('#softphone-answer').addClass("disabled");
                $('#softphone-hungup').addClass("disabled");
                $('#softphone-status .hold').addClass("disabled").show();
                $('#softphone-status .unhold').addClass("disabled").hide();
                $('#usails_autoOn .autoOn').removeClass("disabled").show();
                $('#usails_autoOn .autoOff').addClass("disabled").hide();
                $('#usails_account .login').hide();
                $('#usails_account .logout').show();
                $('#usails_settings').removeClass("disabled");

                $('#usails_agent_status_no').hide();
                statusListener.canceltimer();
                $('#usails_agent_timer_call').hide();
                $('#agentstatus').html("空闲");
                $('#usails_agentstatus').show();
                $('#usails_messagepoint').hide();
            },
            ready: function () {
                $('#softphone-ready').addClass("disabled");
                $('#softphone-notready').removeClass("disabled");
                $('#usails_vacation .vacation').removeClass("disabled").show();
                $('#usails_vacation .vacationOff').addClass("disabled").hide();
                $('#softphone-makecall').removeClass("disabled");
                $('#softphone-answer').addClass("disabled");
                $('#softphone-hungup').addClass("disabled");
                $('#softphone-status .hold').addClass("disabled").show();
                $('#softphone-status .unhold').addClass("disabled").hide();

                statusListener.canceltimer();
                $('#usails_agent_timer_call').hide();
                $('#agentstatus').html("空闲");
                $('#usails_agentstatus').show();
                $('#usails_messagepoint').hide();
            },
            notready: function (calls) {
                $('#softphone-ready').removeClass("disabled");
                $('#softphone-notready').addClass("disabled");
                $('#softphone-makecall').removeClass("disabled");
                $('#softphone-answer').addClass("disabled");
                $('#softphone-hungup').addClass("disabled");
                $('#softphone-status .hold').addClass("disabled").show();
                $('#softphone-status .unhold').addClass("disabled").hide();

                statusListener.canceltimer();
                $('#usails_agent_timer_call').hide();
                $('#agentstatus').html("忙");
                $('#usails_agentstatus').show();
                $('#usails_messagepoint').hide();

            },
            vacation: function () {
                $('#softphone-ready').removeClass("disabled");
                $('#softphone-notready').removeClass("disabled");
                $('#usails_vacation .vacation').addClass("disabled").hide();
                $('#usails_vacation .vacationOff').addClass("disabled").show();
                $('#softphone-makecall').addClass("disabled");
                $('#softphone-answer').addClass("disabled");
                $('#softphone-hungup').addClass("disabled");
                $('#softphone-status .hold').addClass("disabled").show();
                $('#softphone-status .unhold').addClass("disabled").hide();

                statusListener.canceltimer();
                $('#usails_agent_timer_call').hide();
                $('#agentstatus').html("小休");
                $('#usails_agentstatus').show();
                $('#usails_messagepoint').hide();

            },
            aftercallwork: function () {
                $('#softphone-ready').removeClass("disabled");
                $('#softphone-notready').removeClass("disabled");
                $('#usails_vacation .vacation').removeClass("disabled").show();
                $('#usails_vacation .vacationOff').addClass("disabled").hide();
                $('#softphone-makecall').removeClass("disabled");
                $('#softphone-answer').addClass("disabled");
                $('#softphone-hungup').addClass("disabled");
                $('#softphone-status .hold').addClass("disabled").show();
                $('#softphone-status .unhold').addClass("disabled").hide();

                statusListener.canceltimer();
                $('#usails_agent_timer_call').hide();
                $('#agentstatus').html("后处理");
                $('#usails_agentstatus').show();
                $('#usails_messagepoint').hide();

            },
            callIn: function (calls) {
                $('#softphone-hungup').removeClass("disabled");
                if(calltype=="webrtc"||calltype=="sip"){
                    $('#softphone-answer').removeClass("disabled");
                }else{
                    $('#softphone-answer').addClass("disabled");
                }
                $('#softphone-status .hold').addClass("disabled").show();
                $('#softphone-status .unhold').addClass("disabled").hide();
                $('#manage').removeClass("disabled");
                $('#softphone-makecall').addClass("disabled");
                $('#softphone-notready').addClass("disabled");
                $('#softphone-ready').addClass("disabled");
                $('#usails_vacation .vacation').removeClass("disabled").show();
                $('#usails_vacation .vacationOff').addClass("disabled").hide();

                $('#discall .number').text(calls);
                $('#usails_agent_timer_call').show();
                statusListener.canceltimer();
                 $('#agentstatus').html("");
                $('#usails_agentstatus').hide();
                $('#usails_messagepoint').hide();

            },
            callOut: function (calls) {
                $('.soft-function,.status').removeClass("disabled");
                $('#softphone-hungup').removeClass("disabled");
                if(calltype=="webrtc"||calltype=="sip"){
                    $('#softphone-answer').addClass("disabled");
                }else{
                    $('#softphone-answer').addClass("disabled");
                }
                $('#softphone-status .hold').addClass("disabled").show();;
                $('#softphone-status .unhold').addClass("disabled").hide();
                $('#softphone-makecall').addClass("disabled");
                $('#softphone-ready').addClass("disabled");
                $('#softphone-notready').addClass("disabled");
                $('#usails_vacation .vacation').addClass("disabled").show();
                $('#usails_vacation .vacationOff').addClass("disabled").hide();

                $('#discall .number').text(calls);
                $('#usails_agent_timer_call').show();
                statusListener.canceltimer();
                $('#usails_messagepoint').hide();
                 $('#agentstatus').html("");
                $('#usails_agentstatus').hide();
            },
            hungup: function (calls) {
                $('#softphone-ready').removeClass("disabled");
                $('#softphone-notready').removeClass("disabled");
                $('#usails_vacation .vacation').removeClass("disabled").show();
                $('#usails_vacation .vacationOff').addClass("disabled").hide();
                $('#softphone-makecall').removeClass("disabled");
                $('#softphone-answer').addClass("disabled");
                $('#softphone-hungup').addClass("disabled");
                $('#softphone-status .hold').addClass("disabled").show();
                $('#softphone-status .unhold').addClass("disabled").hide();

                $('#usails_agent_timer_call').hide();
                statusListener.canceltimer();
                $('#usails_messagepoint').hide();
                 $('#agentstatus').html("空闲");
                $('#usails_agentstatus').show();
            },
            accepted: function (calls) {
                $('#softphone-hungup').removeClass("disabled");

                if(calltype=="webrtc"||calltype=="sip"){
                    $('#softphone-answer').addClass("disabled");
                    $('#softphone-status .hold').removeClass("disabled").show();
                    $('#softphone-status .unhold').addClass("disabled").hide();
                }else{
                    $('#softphone-answer').addClass("disabled");
                    $('#softphone-status .hold').addClass("disabled").show();
                    $('#softphone-status .unhold').addClass("disabled").hide();
                }
                $('#softphone-makecall').addClass("disabled");
                $('#usails_vacation .vacation').addClass("disabled").show();
                $('#usails_vacation .vacationOff').addClass("disabled").hide();
                $('#softphone-notready').addClass("disabled");
                $('#softphone-ready').addClass("disabled");

                $('#discall .number').text(calls);
                $('#usails_agent_timer_call').show();
                statusListener.canceltimer();
                $('#usails_messagepoint').hide();
                 $('#agentstatus').html("");
                $('#usails_agentstatus').hide();
            },
            hold: function (calls) {
                $('.soft-function,.status').removeClass("disabled");
                $('#softphone-answer').addClass("disabled");
                $('#softphone-hungup').addClass("disabled");

                $('#softphone-status .hold').addClass("disabled").hide();
                $('#softphone-status .unhold').removeClass("disabled").show();
            },
            unhold: function (calls) {
                $('#softphone-answer').addClass("disabled");
                $('#softphone-hungup').removeClass("disabled");
                $('#softphone-status .unhold').addClass("disabled").hide();
                $('#softphone-status .hold').removeClass("disabled").show();
                $('#softphone-makecall').addClass("disabled");
                $('#softphone-notready').addClass("disabled");
                $('#softphone-ready').addClass("disabled");

                $('#usails_hangup').hide();
                $('#usails_agent_status_offline').hide();
                $('#usails_agent_status_no').hide();
                $('#usails_agent_status_call').show();
                $('#usails_agent_status_ok').hide();
                $('#usails_agent_docallout').hide();
                $('#usails_agent_timer_call').hide();
                $('#usails_messagepoint').hide();
                statusListener.canceltimer();

                statusListener.ext("unhold");
            },
            logout: function () {
                $('.status').addClass("disabled");
                $('#softphone-ready').addClass("disabled");
                $('#softphone-notready').addClass("disabled");
                $('#usails_vacation .vacation').addClass("disabled").show();
                $('#usails_vacation .vacationOff').addClass("disabled").hide();
                $('#softphone-makecall').addClass("disabled");
                $('#softphone-answer').addClass("disabled");
                $('#softphone-hungup').addClass("disabled");
                $('#softphone-status .hold').addClass("disabled").show();
                $('#softphone-status .unhold').addClass("disabled").hide();
                $('#usails_autoOn .autoOn').addClass("disabled").show();
                $('#usails_autoOn .autoOff').addClass("disabled").hide();
                $('#usails_account .login').removeClass("disabled").show();
                $('#usails_account .logout').addClass("disabled").hide();
                $('#usails_settings').addClass("disabled");

                $('#usails_agent_status_no').show();
                $('#usails_agent_timer_call').hide();
                statusListener.canceltimer();
                $('#usails_messagepoint').hide();
                 $('#agentstatus').html("");
                $('#usails_agentstatus').hide();
            },

            errorpoint: function (data) {
                $('#usails_hangup').hide();
                $('#usails_agent_timer_call').hide();
                $('#point').html(data);
                $('#usails_messagepoint').show();

            },
             autoOn: function () {
                $('#usails_autoOn .autoOff').removeClass("disabled").show();
                $('#usails_autoOn .autoOn').addClass("disabled").hide();
            },
             autoOff: function () {
                $('#usails_autoOn .autoOn').removeClass("disabled").show();
                $('#usails_autoOn .autoOff').addClass("disabled").hide();
            },
            timer: function () {
                $('#usails_messagepoint').hide();
                $('#usails_hangup').hide();
                $('#usails_agent_status_offline').hide();
                $('#usails_agent_status_no').hide();
                $('#usails_agent_status_call').hide();
                $('#usails_agent_status_ok').hide();
                $('#usails_agent_timer_call').show();

                $('#usails_agent_timer_call .timer').html("00:00:00");
                /**
                 *
                 */
                statusListener.canceltimer();
                durtime = 0;

                $('#usails_agent_timer_call .timer').html("00:00:00");
                /**
                 * 计时
                 */
                calltimer = setInterval(function () {
                    durtime = durtime + 1;
                    var sec = durtime % 60;
                    if (sec < 10) {
                        sec = "0" + sec;
                    }
                    var min = Math.floor((durtime % (60 * 60)) / 60);
                    if (min < 10) {
                        min = "0" + min;
                    }
                    var hour = Math.floor(durtime / (60 * 60));
                    if (hour < 10) {
                        hour = "0" + hour;
                    }

                    $('#usails_agent_timer_call .timer').html(hour + ":" + min + ":" + sec);
                }, 1000);
            },
            canceltimer: function () {
                if (calltimer != null) {
                    clearInterval(calltimer);
                }
                $('#usails_agent_timer_call .timer').html("00:00:00");
            }
        }
        var stateEventListener = {
            handle: (event, data) => {
                console.log("event: " , event , "\n" + "data: " , data);
                if (event === 'LOGIN') {
                    statusListener.login();
                    calltype=data.calltype;
                } else if (event === 'READY') {
                    statusListener.ready();
                } else if (event === 'LOGOUT') {
                    statusListener.logout();
                } else if (event === 'NOTREADY') {
                    statusListener.notready();
                } else if (event === 'AFTERPROCESS') {
                    statusListener.afterprocess(data);
                } else if (event === 'REST') {
                    statusListener.rest();
                } else if (event === 'RING') {
                    if (data.direction === 'out') {
                        statusListener.callOut(data.dnis);
                        statusListener.timer();
                    } else {
                        statusListener.callIn(data.dnis);
                    }

                } else if (event === 'ANSWER') {
                console.log("accepted");
                    statusListener.accepted(data.dnis);
                } else if (event === 'HANGUP') {
                } else if (event === 'HOLD') {
                    statusListener.hold();
                } else if (event === 'UNHOLD') {
                    statusListener.unhold();
                } else if (event === 'MUTE') {
                    //FIXME:
                } else if (event === 'UNMUTE') {
                    //FIXME:
                } else if (event === 'ERROR') {

                } else if (event === 'MESSAGEPOINT') {
                console.log(data.message);
                   statusListener.errorpoint(data.message);
                } else if (event === 'autoOn') {
                   statusListener.autoOn();
                } else if (event === 'autoOff') {
                   statusListener.autoOff();
                } else if (event === 'vacation') {
                   statusListener.vacation();
                } else if (event === 'aftercallwork') {
                   statusListener.aftercallwork();
                }

            }
        };


        $(document).ready(function () {


            $(document).on("click", '#dialpad .number', function (e) {
                var tons = $(this).attr("id");
                window.Ctibar.dtmf(tons);

            });
            $(document).on("click", '[data-toggle="soft-function"]', function (e) {
                if ($(this).closest(".disabled").length == 0) {
                    var name = $(this).data("action");
                    if (name == "login") {
                        //   if( window.Ctibar.checkmic())  {
                        var configuration = {
                            baseUrl: 'https://cc.ccpaas.com',
                            username: '1000',
                            password: "Xx1234_1",
                            tenantName: "重庆四班科技有限公司",
                            stateEventListener,
                        };
                         window.Ctibar.init(configuration, function () {
                            console.log('init success.');
                        }, function () {
                            console.log('init failed.');
                        });
                    } else if (name == "logout") {
                        Ctibar.logout();
                    } else if (name == "ready") {
                        Ctibar.ready();
                    } else if (name == "notready") {
                        Ctibar.notready();
                    } else if (name == "cancelafterprocess") {
                        Ctibar.cancleafterprocess();
                    } else if (name == "answer") {
                        Ctibar.answer();
                        /**
                         * 做了响应
                         */
                        resp = true;
                    } else if (name == "hungup") {
                        Ctibar.hungup();

                    } else if (name == "hold") {
                        Ctibar.hold();
                    } else if (name == "unhold") {
                        Ctibar.unhold();
                    } else if (name == "trans") {
                    console.log(" Ctibar.trans()");
                    } else if (name == "mute") {
                        Ctibar.mute();
                    }
                    else if (name == "unmute") {
                        Ctibar.unmute();
                    }
                    else if (name == "settings") {
                         Ctibar.settings();
                    }
                    else if (name == "settingesc") {
                         Ctibar.settingesc();
                    }
                    else if (name == "settingok") {
                         Ctibar.settingok();
                         Ctibar.logout();
                    }
                    else if (name == "autoOn") {
                         Ctibar.autoOn();
                    }
                    else if (name == "autoOff") {
                         Ctibar.autoOff();
                    }
                    else if (name == "vacation") {
                         Ctibar.vacation();
                    }
                }
            });
            var ondial = false;
            $('#softphone-makecall').click(function () {
                var pos = $(this).offset();
                if ($(this).closest(".disabled").length == 0) {
                    current = "makecall";
                    $('#dialpad').css("top", pos.top + 45 + "px").css("left", pos.left + "px");
                    $('#dialpad').show();
                    $("#dialpad-input").focus();
                }
            });
            $('#softphone-trans').click(function () {
                var pos = $(this).offset();
                console.log("softphone-trans："+$(this).closest(".disabled").length == 0);
                if ($(this).closest(".disabled").length == 0) {
                    current = "trans";
                    $('#dialpad').css("top", pos.top + 45 + "px").css("left", pos.left + "px");
                    $('#dialpad').show();
                    $("#dialpad-input").focus();
                }
            });
            $('#usails-dial-del').click(function () {
                var value = $("#dialpad-input").val();
                if (value != "" && value.length > 0) {
                    $("#dialpad-input").val(value.substring(0, value.length - 1));
                }
            });
            $('#dialpad .number').on("mousedown", function (e) {
                $(this).css("background-color", "#1E90FF");
            }).on("mouseup", function (e) {
                $(this).css("background-color", "#FFFFFF");
            }).on("click", function (e) {
                $("#dialpad-input").val($("#dialpad-input").val() + $(this).attr("id"));
            });
            $("#makecall").on("click", function () {
                console.log("current:"+current);
                if (current == "makecall") {
                    Ctibar.invite($('#dialpad-input').val());
                } else if (current == "trans") {
                    Ctibar.trans($('#dialpad-input').val());
                }
                $('#dialpad-input').val("");
                $('#dialpad').hide();
            });
            $('#dialpad').hover(function () {
                ondial = true;
            }, function () {
                ondial = false;
                setTimeout(function () {
                    if (ondial == false) {
                        $('#dialpad').hide();
                    }
                }, 1000);
            });
        });

    </script>

<body>

<div class="usails-softphone" id="usails-softphone">
  <div class="softphone-stream" style="display:none;">
    <audio id="remoteAudio"></audio>
    <audio id="localAudio" muted="muted"></audio>
    <video id="myringAudio" controls="controls"  type="audio/mp4" src="./wav/ring.mp3" muted/>
  </div>
  <div class="status disabled" style="padding:3px 0 0 0px;color:#ffffff;width: 180px;overflow: hidden;">
    <div id="usails_agent_status_no" style="padding:15px 0 0 0px;">
      <i class="layui-icon">&#xe617;</i>
      坐席未登录，连接失败
    </div>
    <div id="usails_messagepoint" style="padding:15px 0 0 0px;display:none;color:#ffffff;">
      <i class="layui-icon">&#xe617;</i>
      提示：<span class="text" id="point"></span> <span class="messagepoint"></span>
    </div>
    <div id="usails_agentstatus" style="padding:15px 0 0 0px;display:none;color:#ffffff;">
      <i class="layui-icon">&#xe617;</i>
      坐席状态：<span class="text" id="agentstatus"></span>
    </div>
    <div id="usails_agent_status_call" style="display:none;color:#ffffff;">
      <div class="text" id="caller">主叫号码：<span class="number"></span></div>
      <div class="text" id="called">被叫号码：<span class="number"></span></div>
    </div>
    <div id="usails_agent_timer_call" style="display:none;">
      <div class="text" id="discall">号码：<span class="number"></span></div>
      <div class="text">时长：<span class="timer">00:00:00</span></div>
    </div>
  </div>

  <div class="soft-function disabled" id="softphone-ready" data-toggle="soft-function" data-action="ready">
    <div class="icon"><i class="kfont">&#xe698;</i></div>
    <div class="text">空闲</div>
  </div>
  <div class="soft-function disabled" id="softphone-notready" data-toggle="soft-function" data-action="notready">
    <div class="icon"><i class="kfont">&#xe698;</i></div>
    <div class="text">置忙</div>
  </div>

  <div class="soft-function disabled" id="usails_vacation">
    <div class="soft-function vacation"  data-toggle="soft-function" data-action="vacation">
      <div class="icon"><i class="kfont">&#xe682;</i></div>
      <div class="text">小休</div>
    </div>
    <div class="soft-function vacationOff" style="display:none;" data-toggle="soft-function" data-action="vacationOff">
      <div class="icon"><i class="kfont">&#xe682;</i></div>
      <div class="text">小休中</div>
    </div>
  </div>

  <div class="soft-function disabled diafunction" id="softphone-makecall">
    <div class="icon"><i class="kfont">&#xe670;</i></div>
    <div class="text">拨打</div>
  </div>
  <div class="soft-function disabled" id="softphone-answer" data-toggle="soft-function" data-action="answer">
    <div class="icon"><i class="kfont">&#xe698;</i></div>
    <div class="text">接听</div>
  </div>
  <div class="soft-function disabled" id="softphone-hungup" data-toggle="soft-function" data-action="hungup">
    <div class="icon"><i class="kfont">&#xe60e;</i></div>
    <div class="text">挂断</div>
  </div>
  <div class="soft-function disabled" id="softphone-status">
    <div class="soft-function hold" data-toggle="soft-function" data-action="hold">
      <div class="icon"><i class="kfont">&#xe647;</i></div>
      <div class="text">保持</div>
    </div>
    <div class="soft-function unhold" data-toggle="soft-function" data-action="unhold" style="display:none;">
      <div class="icon"><i class="kfont">&#xe605;</i></div>
      <div class="text">取回</div>
    </div>
  </div>

  <div class="soft-function disabled" id="usails_autoOn">
    <div class="soft-function autoOn"  data-toggle="soft-function" data-action="autoOn">
      <div class="icon"><i class="kfont">&#xe624;</i></div>
      <div class="text">长签</div>
    </div>
    <div class="soft-function autoOff" style="display:none;" data-toggle="soft-function" data-action="autoOff">
      <div class="icon"><i class="kfont">&#xe689;</i></div>
      <div class="text">退签</div>
    </div>
  </div>

  <div class="soft-function" id="usails_account">
    <div class="soft-function login" data-toggle="soft-function" data-action="login">
      <div class="icon"><i class="kfont">&#xe61f;</i></div>
      <div class="text">登录</div>
    </div>
    <div class="soft-function logout" style="display:none;" data-toggle="soft-function" data-action="logout">
      <div class="icon"><i class="kfont">&#xe611;</i></div>
      <div class="text">登出</div>
    </div>

  </div>
  <div class="soft-function && !settingDisable" id="usails_settings">
    <div class="soft-function settings disabled" data-toggle="soft-function" data-action="settings">
      <div class="icon"><i class="kfont2">&#xe61f;</i></div>
      <div class="text text-en">其它</div>
    </div>
  </div>
  <div class="dialpad" id="dialpad">
    <div class="dialnum">
      <input class="dialpad-input" type="text" id="dialpad-input" value="">
      <i class="kfont usails-dial-del" id="usails-dial-del">&#xe675;</i>
    </div>
    <button class="number" id="1">1</button>
    <button class="number" id="2">2</button>
    <button class="number" id="3">3</button>
    <button class="number" id="4">4</button>
    <button class="number" id="5">5</button>
    <button class="number" id="6">6</button>
    <button class="number" id="7">7</button>
    <button class="number" id="8">8</button>
    <button class="number" id="9">9</button>
    <button class="number" id="*">*</button>

    <button class="number" id="0">0</button>
    <button class="number" id="#">#</button>

    <button id="makecall" class="call"><i class="kfont">&#xe61f;</i></button>
  </div>
</div>
<div id="setting" style="border: 1px solid;width: 100%;margin: auto;height: 100%;position: fixed;left: 0px;top: 0px;background: rgb(0,0,0,0.6);overflow: auto;text-align: center;display: none;">
  <div style="background: white;width: 250px;height: 150px;margin: auto;margin-top: 50px;border-radius: 5px;">
    <div style="height: 110px;border-bottom: 1px solid #CCCCCC;">
      <div style="font-size: 0.9rem;padding-top: 45px;">模式选择:<select id="seatType"></select></div>
    </div>
    <div style="height: 39px;">
      <div  data-action="settingok" data-toggle="soft-function" style="float: left;width: 49%;height: 39px;border-right: 1px solid #CCCCCC;line-height: 39px;font-size: 1rem;">确认</div>
      <div data-action="settingesc"data-toggle="soft-function"  style="float: right;width: 50%;height: 39px;line-height: 39px;font-size: 1rem">取消</div>
    </div>
  </div>
</div>
</body>

</html>
